<template>
  <div class="contant">
    <img src="/static/imgs/hero/firstBg.png" alt="" class="firstBg">
    <div class="firstPic">
      <div class="money" id="money">888</div>
    </div>
    <img src="/static/imgs/hero/firstBtn.png" alt="" class="firstBtn" @click="extract">
    <com-tab></com-tab>
  </div>
</template>

<script>
  import tab from '@/components/tab'
  import api from '@/api'
  import { Indicator, Toast } from 'mint-ui'
  export default {
    name: 'extractFirst',
    mounted () {
      Indicator.close();
    },
    methods : {
      extract () {
        this.$store.commit('openExtract');
        this.$store.commit('openHasMoney');
      },
    },
    components: {
      'com-tab': tab
    }
  }
</script>

<style scoped  lang="less">
  .contant{
    height: 100%;
    .firstBg{
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      z-index: -1;
    }
    .firstPic{
      width: 90%;
      height: 52%;
      position: absolute;
      left: 5%;
      top: 21%;
      background-image: url("/static/imgs/hero/firstPic.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      .money{
        color: #fff179;
        position: absolute;
        width: 50%;
        bottom: 7.4%;
        left: 28%;
        font-size: 1.5rem;
      }
    }
    .firstBtn{
      width: 82%;
      position: absolute;
      left: 9%;
      bottom: 14%;
      z-index: 3;
    }
  }
  @media screen and (min-height: 740px)  and (min-width: 360px){
    #money{
      bottom: 8%;
    }
  }
</style>
